<template>
	<view class="content">
		<view class="header">
			<view class="sec">
				<view class="top">
					<view class="left">
						<image :src="caseobj.avatar"></image>
						<view class="name">
							<text class="name_text">{{caseobj.nickname}}</text>
							<text class="name_time">{{caseobj.create_time}}</text>
						</view>
					</view>
				</view>
				<view class="miaoshu">
					{{caseobj.title}}
				</view>
			</view>
		</view>
		<view class="subsection_cont">
			<view class="subsection flex-c-c" :class="type==1?'subsectioncheck':''" @click="subsectionChange(1)">
				<text :class="type==1?'subsetext':''">ta的赠送</text>
			</view>
			<view class="subsection2 flex-c-c" :class="type==2?'subsectioncheck':''" @click="subsectionChange(2)">
				<text :class="type==2?'subsetext':''">我的求赠</text>
			</view>
		</view>
		<view class="tuijian">
			<view class="tuijian_con" v-for="(item, i) in giveList" :key="i" v-if="giveList != ''" >
				<view class="sec_center">
					<view class="center flex-c-c">
						<image class="icon" :src="item.prize_icon" mode="aspectFit" @click="proviewimg(item.prize_icon)"></image>
					</view>
					<view class="right">
						<text class="name">{{item.prize_name}}</text>
						<text class="huaxian">{{item.prize_level}}</text>
						<view class="cont">
							<text class="price">价格：{{item.price}}元</text>
							<text class="label" v-if="item.status!=0">{{item.status_str}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footbtn allbtn flex-c-c" @click="submit">
			我想要
		</view>
		<view class="emptya flex-column flex-c-c" v-if="giveList == ''">
			<!-- <image src="https://pd.pdaxiang.com/upload/static/index/null.png"></image> -->mage> -->
			<text class="size-32 color-h">暂无数据</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			m_order_id:"",
			page:1,
			type:1,//1他的赠送2我的求赠
			giveList:[],
			caseobj:{}
		};
	},
	onLoad(e) {
		this.m_order_id = e.m_order_id
		this.caseobj = JSON.parse(e.caseobj)
	},
	onShow() {
		this.getlist();
	},
	onPullDownRefresh() {
		this.page=1;
		this.orderlist = []
		this.zongjia = 0
		this.getlist();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
		 clearTimeout();
	},
	onReachBottom() {
		this.page++;
		this.getlist(2);
	},
	onHide() {
		this.page = 1;
	},
	methods: {
		proviewimg(img){
			let arr = []
			arr.push(img)
			uni.previewImage({
				urls: arr,
				current :1,
				longPressActions: {
					itemList: [ '保存图片'],
					success: function(data) {
						uni.saveImageToPhotosAlbum({
							filePath: arr,
							success: function () {
								uni.showToast({
									title:"保存成功",
									duration:1500
								})
							}
						});
					}
				}
			});
		},
		getlist(type){
			let data = {
				m_order_id:this.m_order_id,
				type:this.type,
				page:this.page
			}
			this.$Request.get(this.$api.give.giveDetailList,data).then(res => {
				uni.stopPullDownRefresh();
				if(type==2){
					this.giveList = this.giveList.concat(res.data.goods_list);
					if(res.data.goods_list==''){
						this.morestatus = "nomore"
					}
					return
				}
				this.giveList = res.data.goods_list;
				this.morestatus = "loadmore"
			});
		},
		submit(){
			uni.navigateTo({
				url:"/casePage/case/xuanlist?m_order_id=" + this.m_order_id
			})
		},
		subsectionChange(e){
			this.type = e;
			this.page = 1;
			this.giveList = []
			this.getlist();
		},
	}
};
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background: #FFFFFF;
	padding-top: 20rpx;
	.footbtn{
		width: 600rpx;
		height: 88rpx;
		color: #000;
		font-size: 38rpx;
		font-weight: bold;
		border-radius: 100rpx;
		margin: 0 auto;
		position: fixed;
		left: 10%;
		bottom: 103rpx;
	}
	.tuijian {
		background: #ffffff;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		position: relative;
		.sec_right {
			position: absolute;
			right: 40rpx;
			top: 40rpx;
			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #000000;
			}
		}
		.sec_bottom {
			.view_title {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			.bom {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 22rpx;
				.left {
					display: flex;
					align-items: center;
					text:nth-child(1) {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						max-width: 240rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
				.right {
					font-size: 29rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					text-align: center;
					line-height: 24rpx;
					background: #fd8e1b;
					border-radius: 10rpx;
					padding: 8rpx 26rpx 8rpx 26rpx;
				}
			}
		}
		.tuijian_con {
			width: 710rpx;
			margin: 10rpx auto;
			padding: 20rpx;
			background-size: 100% 100% !important;
			background-repeat: no-repeat !important;
			margin-bottom: 10rpx;
			border-radius: 20rpx;
			.sec_center {
				width: 710rpx;
				margin: 0 auto;
				display: flex;
				.left {
					image {
						width: 44rpx;
						height: 44rpx;
					}
				}
				.center {
					padding: 10rpx 0 10rpx 0;
					height: 172rpx;
					position: relative;
					.list_logo {
						width: 44rpx;
						height: 46rpx;
						position: absolute;
						top: 0;
						left: 0;
					}
					.icon {
						width: 240rpx;
						height: 206rpx;
						border-radius: 10rpx;
					}
				}
				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					padding: 0 20rpx 0 0;
					box-sizing: border-box;
					margin-left: 20rpx;
					.name {
						max-width: 340rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-top: 6rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: justify;
						overflow: hidden;
					}
					.huaxian {
						max-width: 340rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-top: 6rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: justify;
						overflow: hidden;
					}
					.cont {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.price{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #F34A4A;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							text-align: justify;
							overflow: hidden;
							padding-right: 20rpx;
							box-sizing: border-box;
						}
						.label{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #F34A4A;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							text-align: justify;
							overflow: hidden;
							padding-right: 20rpx;
							box-sizing: border-box;
						}
					}
					.bom {
						min-width: 320rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 2rpx;
						.left {
							display: flex;
							align-items: center;
							text:nth-child(1) {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #000000;
							}
						}
						.right {
							font-size: 29rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #ffffff;
							text-align: center;
							line-height: 24rpx;
							background: #fd8e1b;
							border-radius: 10rpx;
							padding: 16rpx 26rpx 16rpx 26rpx;
						}
					}
				}
			}
		}
	}
	.subsection_cont{
		width: 710rpx;
		margin: 0 auto;
		background: #FFFFFF;
		padding: 10rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.subsection{
			width: 376rpx;
			height: 60rpx;
			background: #ffffff;
			border-radius: 10rpx 0px 0px 10rpx;
			border: 1px solid #FFCD12;
			text{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333;
			}
		}
		.subsection2{
			width: 376rpx;
			height: 60rpx;
			background: #ffffff;
			border-radius: 0 10rpx 10rpx 0;
			border-top: 1px solid #FFCD12;
			border-right: 1px solid #FFCD12;
			border-bottom: 1px solid #FFCD12;
			text{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333;
			}
		}
		.subsetext{
			color: #000 !important;
		}
		.subsectioncheck{
			background:#FFCD12 !important;
		}
	}
	.header {
		.sec {
			margin-right: 20rpx;
			padding: 20rpx;
			margin-bottom: 10rpx;
			box-sizing: border-box;
			.miaoshu{
				width: 700rpx;
				height: 100rpx;
				background: #FFFFFF;
				border: 1px solid #DADADA;
				border-radius: 10rpx;
				margin-top: 32rpx;
				padding: 30rpx 24rpx 40rpx 24rpx;
				box-sizing: border-box;
			}
			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left {
					display: flex;
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
					.name {
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding-left: 12rpx;
						.name_text {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}
						.name_time {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							margin-top: 20rpx;
						}
					}
				}
				.right {
					display: flex;
					align-items: center;
					flex-direction: column;
					image {
						width: 34rpx;
						height: 34rpx;
						padding-right: 18rpx;
					}
					text {
						font-size: 20rpx;
						color: #ffffff;
					}
				}
			}
		}
	}
}
</style>
